<template>
    <div class="son">
    <h1>子组件</h1>
    <h2>父组件的参数：id:{{ id }} data:{{ data }}</h2>
    <button @click="changeId">修改子组件id参数</button>
    <!-- 直接调用传过来的useSon -->
    <button @click="useSon('嘿嘿')">给父组件传参数</button>
</div>
</template>

<script lang="ts">
export default {
name:'Son'
}
</script>

<script setup lang="ts">
//引入
import { defineProps, ref } from 'vue';
import { storeToRefs } from 'pinia';

//获取父组件传来的参数
const pro = defineProps(['id', 'data','useSon'])
let id =  ref(pro.id)
let data = ref(pro.data)

function changeId() { 
    id.value = 2
}


</script>

<style lang="css">
.son{
    margin: 20px;
    width: 400px;
    height: 100px;
    background-color:antiquewhite;
}
</style>